<div class="row card-body recycle-bin-body">
  <div class="col-12">
    <h2 class="text-muted">
      <i class="fas fa-trash-alt"></i> Deleted Feedback Sessions
    </h2>
    <div>
      <ng-template #emptyBinAlert>
        <div class="alert alert-warning margin-top-30px" role="alert">
          There are no sessions in the bin.
        </div>
      </ng-template>
      <div class="card bg-light top-padded" *ngIf="recycleBinFeedbackSessionRowModels.length !== 0 else emptyBinAlert">
        <div id="deleted-sessions-heading" class="card-header bg-secondary text-white cursor-pointer" (click)="recycleBinExpandEvent.emit()">
          <b>Recycle Bin</b>
          <div class="card-header-btn-toolbar">
            <button id="btn-restore-all" type="button" class="btn btn-secondary btn-sm" ngbTooltip="Restore all feedback sessions"
                    (click)="$event.stopPropagation(); restoreAllRecycleBinFeedbackSessionEvent.emit()"><i class="fas fa-check"></i> Restore All</button>
            <button id="btn-delete-all" type="button" class="btn btn-secondary btn-sm" ngbTooltip="Permanently delete all feedback sessions"
                    (click)="$event.stopPropagation(); permanentDeleteAllSessionsEvent.emit()"><i class="fas fa-times"></i> Delete All</button>
            <tm-panel-chevron [isExpanded]="isRecycleBinExpanded"></tm-panel-chevron>
          </div>
        </div>
        <div *ngIf="isRecycleBinExpanded" class="table-responsive" @collapseAnim>
          <table id="deleted-sessions-table" class="table table-striped table-bordered recycle-bin-table">
            <thead class="recycle-bin-table-header">
            <tr>
              <th id="sort-deleted-course-id" (click)="sortRecycleBinFeedbackSessionRows(SortBy.COURSE_ID)" class="sortable-header" [attr.aria-sort]="getAriaSort(SortBy.COURSE_ID)">
                <button>
                  Course ID
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.COURSE_ID && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.COURSE_ID && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
                  </span>
                </button>
              </th>
              <th id="sort-deleted-session-name" (click)="sortRecycleBinFeedbackSessionRows(SortBy.SESSION_NAME)" class="sortable-header" [attr.aria-sort]="getAriaSort(SortBy.SESSION_NAME)">
                <button>
                  Session Name
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.SESSION_NAME && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.SESSION_NAME && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
                  </span>
                </button>
              </th>
              <th (click)="sortRecycleBinFeedbackSessionRows(SortBy.SESSION_CREATION_DATE)" class="sortable-header" [attr.aria-sort]="getAriaSort(SortBy.SESSION_CREATION_DATE)">
                <button>
                  Creation Date
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.SESSION_CREATION_DATE && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.SESSION_CREATION_DATE && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
                  </span>
                </button>
              </th>
              <th (click)="sortRecycleBinFeedbackSessionRows(SortBy.SESSION_DELETION_DATE)" class="sortable-header" [attr.aria-sort]="getAriaSort(SortBy.SESSION_DELETION_DATE)">
                <button>
                  Deletion Date
                  <span class="fa-stack" aria-hidden="true">
                    <i class="fas fa-sort"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.SESSION_DELETION_DATE && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.DESC" class="fas fa-sort-down"></i>
                    <i *ngIf="recycleBinFeedbackSessionRowModelsSortBy === SortBy.SESSION_DELETION_DATE && recycleBinFeedbackSessionRowModelsSortOrder === SortOrder.ASC" class="fas fa-sort-up"></i>
                  </span>
                </button>
              </th>
              <th class="text-center">Action(s)</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let recycleBinFeedbackSessionRowModel of recycleBinFeedbackSessionRowModels; let i = index">
              <td class="text-break">{{ recycleBinFeedbackSessionRowModel.feedbackSession.courseId }}</td>
              <td class="text-break">{{ recycleBinFeedbackSessionRowModel.feedbackSession.feedbackSessionName }}</td>
              <td>
                <span class="ngb-tooltip-class" [ngbTooltip]="recycleBinFeedbackSessionRowModel.feedbackSession.createdAtTimestamp | formatDateDetail:recycleBinFeedbackSessionRowModel.feedbackSession.timeZone" container="body">
                  {{ recycleBinFeedbackSessionRowModel.feedbackSession.createdAtTimestamp | recycleBinTableFormatDate:recycleBinFeedbackSessionRowModel.feedbackSession.timeZone }}
                </span>
              </td>
              <td>
                <span class="ngb-tooltip-class" [ngbTooltip]="recycleBinFeedbackSessionRowModel.feedbackSession.deletedAtTimestamp | formatDateDetail:recycleBinFeedbackSessionRowModel.feedbackSession.timeZone" container="body">
                  {{ recycleBinFeedbackSessionRowModel.feedbackSession.deletedAtTimestamp | recycleBinTableFormatDate:recycleBinFeedbackSessionRowModel.feedbackSession.timeZone }}
                </span>
              </td>
              <td class="text-center actions-cell">
                <div class="d-flex">
                  <button id="btn-restore-{{ i }}" type="button" class="btn btn-light btn-sm" (click)="restoreSessionEvent.emit(recycleBinFeedbackSessionRowModel)">Restore</button>
                  <button id="btn-delete-{{ i }}" type="button" class="btn btn-light btn-sm text-danger" (click)="permanentlyDeleteSessionEvent.emit(recycleBinFeedbackSessionRowModel); setRowClicked(i)">
                    <span>Delete Permanently</span>
                    <div class="padding-left-7px">
                      <tm-ajax-loading [color]="'#000000'" *ngIf="isPermanentDeleteLoading && rowClicked === i"></tm-ajax-loading>
                    </div>
                  </button>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
